<script type="text/javascript">
		
	var chart;
	jQuery(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'computer_report',
				defaultSeriesType: 'column',
				margin: [ 50, 50, 100, 80]
			},
			title: {
				text: 'Computers status'
			},
			xAxis: {
				categories: [
					<% for computer in @computers_counts %>
						<%= "'#{Computer::COMPUTER_STATUS[computer[:status]]}',"%>
					<%end%>
				],
				labels: {
					rotation: -45,
					align: 'right',
					style: {
						 font: 'normal 13px Verdana, sans-serif'
					}
				}
			},
			yAxis: {
				min: 0,
				title: {
					text: 'Population'
				}
			},
			legend: {
				enabled: false
			},
			tooltip: {
				formatter: function() {
					return '<b>'+ this.x +'</b><br/>'+
						 'All computer by status: '+ Highcharts.numberFormat(this.y, 1);
				}
			},
		        series: [{
				name: 'Population',
				data: [
					<% for computer in @computers_counts %>
						<%= "#{computer[:count]},"%>
					<%end%>
				],
				dataLabels: {
					enabled: true,
					rotation: -90,
					color: '#FFFFFF',
					align: 'right',
					x: -3,
					y: 10,
					formatter: function() {
						return this.y;
					},
					style: {
						font: 'normal 13px Verdana, sans-serif'
					}
				}			
			}]
		});
		
		
	});
		
</script>

<div id="computer_report" style="width: 500px; height: 300px; margin: 0 auto"></div>